<template>
  <div class="locPorject">
    <div class="headBox">
      <div class="headBox_l">附近项目</div>
      <div class="headBox_r" @click="toSearch">
        <i class="iconfont icon-advertise-next"></i>
      </div>
    </div>
    <div class="projectList">
      <div class="list" v-for="(item,index) in projects" :key="index" @click="toUrl('ProjectDetails', { project_id: item.id })">
        <div class="list_l">
          <img :src="item.thumb" alt="" />
        </div>
        <div class="list_r">
          <div class="list_r_title">{{item.title}}</div>
          <div class="list_r_c">
            <div class="flex">
              <i class="iconfont icon-liaotian"></i>
              <div class="num">{{item.comment_num || 0}}</div>
              <i class="iconfont icon-card_laud"></i>
            </div>
            <div class="loc" v-if="item.has_one_store"><i class="iconfont icon-order_locate"></i>{{item.has_one_store.distance}}{{item.has_one_store.unit}}</div>
          </div>
          <div class="list_r_b" v-if="item.has_one_store">门店地址：{{item.has_one_store.store_address}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["projects"],
  data() {
    return {};
  },
  methods: {
    toUrl(str, params) {
      this.$router.push(this.fun.getUrl(str, params));
    },
    toSearch() {
      this.$router.push(
        this.fun.getUrl("AppointmentSearch", {
          city: this.city,
          point: JSON.stringify(this.point)
        })
      );
    }
  }
};
</script>
<style lang="scss" scoped>
.locPorject {
  padding: 0 0.78rem;
  box-sizing: border-box;
  .headBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .headBox_l {
      font-size: 1.13rem;
    }
  }
  .projectList {
    padding-top: 1.03rem;
    .list {
      padding: 0.59rem 0;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      .list_l {
        width: 5.06rem;
        height: 5.06rem;
        border-radius: 0.38rem;
        flex-shrink: 0;
        margin-right: 0.63rem;
        img {
          width: 5.06rem;
          height: 5.06rem;
          border-radius: 0.38rem;
        }
      }
      .list_r {
        flex: 1;
        text-align: left;
        overflow: hidden;
        .list_r_title {
          margin-bottom: 0.53rem;
          font-size: 0.94rem;
        }
        .list_r_c {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .icon-liaotian {
            color: #cccccc;
          }
          .num {
            color: #cccccc;
            font-size: 0.69rem;
            margin-right: 0.63rem;
            margin-left: 0.13rem;
          }
          .icon-card_laud {
            color: #f49f19;
          }
          .loc {
            color: #999999;
            font-size: 0.75rem;
            display: flex;
            align-items: center;
            line-height: 0.94rem;
          }
        }
        .list_r_b {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 0.69rem;
          color: #999999;
          padding-top: 0.6rem;
        }
      }
    }
  }
}
</style>
